<template>
  <div class="hello">
    <!-- :columns="columns" :rows="rows" -->
    <editor-table
      ref="table1"
      :columns="columns"
      :rows="rows"
      :add-columns="true"
      :keyList="['realmName', 'realmValue']"
      :limit="4"
      :rules="[
      {type:'TEXT',before:7,after:2},
      {type:'TEXT',before:6,after:2},
      ]"
    ></editor-table>
    <button @click="getData('table1')">获取结果</button>
    <button @click="changeYears(2021)">2021年</button>
    <button @click="changeYears(2022)">2022年</button>
    <br />
    <br />

    <editor-table
      ref="table2"
      :columns="columns1"
      :rows="rows1"
      :add-columns="true"
      :keyList="[
        'name',
        'carbonEmissionBaseline',
        'reductionsOffsets',
        'carbonEmissionBaselineNet',
      ]"
    ></editor-table>

    <button @click="getData('table2')">获取结果2</button>

    <br />
    <br />
    <editor-table
      ref="table3"
      :columns="columns2"
      :rows="rows2"
      :add-rows="true"
      :keyList="['name', 'value', 'percent']"
      :limit="4"
      :rules="[
      {type:'TEXT',before:5,after:2},
      {type:'DECIMAL',before:5,after:2},
      {type:'DECIMAL',before:3,after:2},
      ]"
    ></editor-table>

    <button @click="getData('table3')">获取结果3</button>

    <br />
    <br />
    <editor-table
      ref="table4"
      :columns="columns3"
      :rows="rows3"
      :add-rows="true"
      :keyList="['overviewName', 'overviewValue']"
      
    ></editor-table>

    <button>获取结果4</button>

    <br />
    <br />
    <custom-table
      ref="table2"
      :columns="columns1"
      :rows="rows1"
      :add-rows="true"
      :keyList="[
        'name',
        'carbonEmissionBaseline',
        'reductionsOffsets',
        'carbonEmissionBaselineNet',
      ]"
      :rules="[
      {type:'TEXT',before:5,after:2},
      {type:'DECIMAL',before:5,after:2},
      {type:'IOD',before:3,after:2,number:8},
      ]"
      :columnMaxLengths="[
        {column:1,limit:8},
      ]"
    ></custom-table>
  </div>
</template>

<script>
import EditorTable from "@/components/EditorTable";
import CustomTable from "@/components/CustomTable";
export default {
  name: "HomeView",
  components: {
    EditorTable,
    CustomTable
  },
  data() {
    return {
      data: [
        { realmName: "", realmValue: "电网" },
        { realmName: "2022年", realmValue: "20" },
        { realmName: "2月", realmValue: "20" },
      ],

      data1: [
        {
          name: "",
          carbonEmissionBaseline: "碳排基线",
          reductionsOffsets: "减排量与抵消量",
          carbonEmissionBaselineNet: "净排放量",
        },
        {
          name: "1928",
          carbonEmissionBaseline: "10",
          reductionsOffsets: "20",
          carbonEmissionBaselineNet: "30",
        },
        {
          name: "1929",
          carbonEmissionBaseline: "10",
          reductionsOffsets: "30",
          carbonEmissionBaselineNet: "40",
        },
      ],

      data2: [
        { name: "", value: "份额", percent: "百分比" },
        { name: "能源1", value: "20", percent: "0.4" },
        { name: "能源2", value: "20", percent: "0.4" } /*  */,
        { name: "能源3", value: "20", percent: "0.4" },
        { name: "能源4", value: "20", percent: "0.4" },
      ],

      data3: [
        {
          overviewName: "碳排基线",
          overviewValue: 8269,
        },
        {
          overviewName: "新能源",
          overviewValue: 1021,
        },
        {
          overviewName: "能效提升",
          overviewValue: 178,
        },
        {
          overviewName: "绿证",
          overviewValue: 1234,
        },
        {
          overviewName: "碳抵消",
          overviewValue: 32,
        },
        {
          overviewName: "净碳排放量",
          overviewValue: 7029,
        },
      ],
      keys3: ["overviewName", "overviewValue"],
      years:2021,
    };
  },
  computed: {
    columns() {
      if (this.years == 2021) {
        return this.formartColumns(this.data);
      }

      return this.columns1;
      
    },
    rows() {

      if (this.years == 2021) {
        return  this.formartRows(this.data, this.columns, [
        "realmName",
        "realmValue",
      ]);
      }

      return this.rows1;
      
    },

    columns1() {
      return this.formartColumns(this.data1);
    },
    rows1() {
      return this.formartRows(this.data1, this.columns, [
        "name",
        "carbonEmissionBaseline",
        "reductionsOffsets",
        "carbonEmissionBaselineNet",
      ]);
    },

    columns2() {
      
      return [{ key: "column0" }, { key: "column1" }, { key: "column2" }];
    },
    rows2() {
      return this.formartAddrows(this.data2,this.columns2,['name', 'value', 'percent']);
    },

    columns3() {
      return this.formartColumns(this.data3);
    },
    rows3() {
      return this.formartRows(this.data3, this.columns3, [
        "overviewName",
        "overviewValue",
      ]);
    },
  },

  methods: {

    formartColumns(list) {
      let arr = [];
      var i = 0;
      const count = list.length;
      while (i < count) {
        const key = "column" + i;
        arr.push({ key: key });
        i++; //增量
      }
      return arr;
    },

    //添加列的横轴
    formartRows(list, columns, keys) {
      const paramArr = [];
      for (let index = 0; index < keys.length; index++) {
        const params = {};
        let subK = keys[index];
        for (let i = 0; i < columns.length; i++) {
          let key = columns[i].key;
          let realValue = list[i][subK];
          params[key] = realValue;
        }
        paramArr.push(params);
      }

      return paramArr;
    },

    //添加行的横轴
    formartAddrows(list, columns, keys) {
      let arr = [];
      for (let index = 0; index < list.length; index++) {
        const params = {};
        let item = list[index];
        for (let i = 0; i < columns.length; i++) {
          let key = columns[i].key;
          let subK = keys[i];
          params[key] = item[subK];
        }
        arr.push(params);
      }
      return arr;
    },

    getData(ref) {
      let table = this.$refs.table2.formartTableData;
      console.log("获取内容", table);
    },

    changeYears(value) {
      this.years = value
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less"></style>
